<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="88px" v-show="stepActive == 0">
            <el-col :span="24">
                <el-form-item label="任务名称" prop="f_Name">
                    <el-input v-model="formData.f_Name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="开始时间" prop="startType">
                    <l-radio v-model="formData.startType" 
                        :options="[{label:'立即执行',value:'1'},{label:'设置开始时间',value:'2'}]"
                        >
                    </l-radio>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.startType == '2'">
                <el-form-item label="" prop="startTime">
                    <l-date v-model="formData.startTime" dateType="datetime"  ></l-date>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="执行频率" prop="executeType">
                    <l-radio v-model="formData.executeType" 
                        :options="[
                            {label:'执行一次',value:'1'},
                            {label:'重复执行',value:'2'},
                            {label:'频率明细',value:'3'},
                            {label:'表达式设置',value:'4'},
                            ]"
                        >
                    </l-radio>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.executeType == '2'">
                <el-form-item label="" prop="simpleValue">
                    <el-input placeholder="请输入" v-model="formData.simpleValue">
                        <template slot="prepend">每隔</template>
                        <l-select 
                            :clearable="false"
                            v-model="formData.simpleType" 
                            slot="append" 
                            :placeholder="$t(`请选择`)" 
                            :options="[
                                {label:'分钟',value:'minute'},
                                {label:'小时',value:'hours'},
                                {label:'天',value:'day'},
                                {label:'周',value:'week'},
                            ]"
                            class="s-w-96">
                        </l-select>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.executeType == '3'">
                <el-form-item>
                    <el-button icon="el-icon-plus" @click="addFrequency()">
                        新增调度明细
                    </el-button>
                    
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.executeType == '3' && frequencyList.length > 0">
                <el-form-item v-for="(item,index) in frequencyList" :key="index">
                    <el-input readonly :value="formatFrequency(item)">
                        <el-button style="color:#409EFF;" slot="append" @click="editFrequency(item,index)">编辑
                        </el-button>
                        <el-button style="color:#F56C6C;" slot="append" @click="delFrequency(index)">删除</el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.executeType == '4'">
                <el-form-item prop="cornValue">
                    <el-input placeholder="请输入表达式" v-model="formData.cornValue">
                        <el-button slot="append" @click="addExpress()">添加</el-button>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="结束时间" prop="endType">
                    <l-radio v-model="formData.endType" 
                        :options="[{label:'无期限',value:'1'},{label:'设置结束时间',value:'2'}]"
                        >
                    </l-radio>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.endType == '2'">
                <el-form-item label="" prop="endTime">
                    <l-date v-model="formData.endTime" dateType="datetime"  ></l-date>
                </el-form-item>
            </el-col>
            <el-col :span="24" >
                <el-form-item label="任务重启" prop="isRestart">
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="formData.isRestart"
                        >
                    </el-switch>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.isRestart == '1'">
                <el-form-item label="重启频率" prop="restartMinute">
                    <el-input placeholder="请输入" v-model.number="formData.restartMinute">
                        <template slot="prepend">每隔</template>
                        <template slot="append">执行一次</template>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData.isRestart == '1'">
                <el-form-item label="重启次数" prop="restartNum">
                    <el-input placeholder="请输入" v-model.number="formData.restartNum">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-form>
        <el-form :model="formData2" :rules="rules2" size="mini"  ref="form2" label-width="88px" v-show="stepActive == 1">
            <el-col :span="24">
                <el-form-item label="任务类型" prop="methodType">
                    <l-radio v-model="formData2.methodType" 
                        :options="[{label:'SQL语句',value:'1'},{label:'存储过程',value:'2'},{label:'接口',value:'3'},{label:'Ioc依赖注入',value:'4'}]"
                        >
                    </l-radio>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '1' || formData2.methodType == '2'">
                <el-form-item label="数据库" prop="dbId">
                    <el-select v-model="formData2.dbId" :placeholder="$t('请选择')">
                        <el-option-group
                        v-for="group in lr_dblinkTree"
                        :key="group.id"
                        :label="group.label">
                            <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '1'">
                <el-form-item label="SQL语句" prop="strSql">
                    <el-input type="textarea" v-model="formData2.strSql" rows="8"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '2'">
                <el-form-item label="存储过程" prop="procName">
                    <el-input type="textarea" v-model="formData2.procName" rows="8"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '3'">
                <el-form-item label="接口类型" prop="urlType">
                    <l-radio v-model="formData2.urlType" 
                        :options="[{label:'Get',value:'1'},{label:'Post',value:'2'}]"
                        >
                    </l-radio>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '3'">
                <el-form-item label="接口地址" prop="url">
                    <el-input type="textarea" v-model="formData2.url" rows="8"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="formData2.methodType == '4'">
                <el-form-item label="IOC方法" prop="iocName">
                    <el-input type="textarea" v-model="formData2.iocName" rows="8"></el-input>
                </el-form-item>
            </el-col>
        </el-form>
           
        

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"

            :width="560"
            :height="320"

            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <frequency-form ref="frequencyForm" ></frequency-form>      
        </l-dialog>

        <l-dialog 
            :title="$t('添加预置表达式')"
            :visible.sync="expressVisible"
            :width="600"
            :height="424"
            :hasBtns="false"
            >
            <l-table :columns="expressColumns" :dataSource="expressData" @rowClick="handleExpressClick" ></l-table>
        </l-dialog>
    </div>
</template>
<script>
import FrequencyForm from './frequencyForm'
export default {
    components: {
        FrequencyForm
    },
    props:{
        stepActive:{
            type:Number,
            default:0
        },
    },
    data(){
        return {
            frequencyList:[],
            formData:{
                f_Name:'',

                

                startType:'1',
                startTime:'',
                executeType:'1',
                simpleValue:'1',
                simpleType:'minute',
                cornValue:'',
                endType:'1',
                endTime:'',
                isRestart:'0',
                restartMinute:1,
                restartNum:1
            },
            rules: {
                f_Name: [
                    { required: true, message: '请输入任务名称'}
                ],
                startTime: [
                    { required: true, message: '请选择开始时间'}
                ],
                simpleValue: [
                    { required: true, message: '请输入时间'}
                ],
                cornValue: [
                    { required: true, message: '请输入表达式'}
                ],
                endTime: [
                    { required: true, message: '请选择结束时间'}
                ],
                restartMinute: [
                    { required: true, message: '请输入时间'}
                ],
                restartNum: [
                    { required: true, message: '请输入次数'}
                ],
            },

            formData2:{
                methodType:'1',
                dbId:'',
                strSql:'',
                procName:'',
                urlType:'1',
                url:'',
                iocName:''
            },
            rules2: {
                dbId: [
                    { required: true, message: '请输入数据库' }
                ],
                strSql: [
                    { required: true, message: '请输入Sql语句' }
                ],
                procName: [
                    { required: true, message: '请输入存储过程名称' }
                ],
                url: [
                    { required: true, message: '请输入接口地址' }
                ],
                iocName: [
                    { required: true, message: '请输入依赖注入名称' }
                ]
            },
            

            formVisible:false,
            formTitle:'',
            formEditData:null,
            formEdit:false,

            expressVisible:false,
            expressColumns: [
                {label:'名称',prop:'name',minWidth:'200'},
            ],
            expressData:[
                {name:'每天12点运行',value:'0 0 12 * * ?'},
                {name:'每天10:15运行',value:'0 15 10 * * ? *'},
                {name:'在2018年的每天10：15运行',value:'0 15 10 * * ? 2018'},
                {name:'每天14点到15点之间每分钟运行一次，开始于14:00，结束于14:59',value:'0 * 14 * * ?'},
                {name:'每天14点到15点每5分钟运行一次，开始于14:00，结束于14:55',value:'0 0/5 14 * * ?'},
                {name:'每天14点到15点每5分钟运行一次，此外每天18点到19点每5钟也运行一次',value:'0 0/5 14,18 * * ?'},
                {name:'每天14:00点到14:05，每分钟运行一次',value:'0 0-5 14 * * ?'},
                {name:'3月每周三的14:10分到14:44，每分钟运行一次',value:'0 10,44 14 ? 3 WED'},
                {name:'每周一，二，三，四，五的10:15分运行',value:'0 15 10 ? * MON-FRI'},
                {name:'每月15日10:15分运行',value:'0 15 10 15 * ?'},
                {name:'每月最后一天10:15分运行',value:'0 15 10 L * ?'},
                {name:'每月最后一个星期五10:15分运行',value:'0 15 10 ? * 6L'},
                {name:'在2018,2019,2010年每个月的最后一个星期五的10:15分运行',value:'0 15 10 ? * 6L 2017-2019'},
                {name:'每月第三个星期五的10:15分运行',value:'0 15 10 ? * 6#3'}
            ]
            
        }
    },
    computed:{
    },
    created () {
        this.lr_loadDblink()
    },
    methods:{

        // 添加频率明显
        addFrequency(){
            this.formTitle = this.$t('添加频率明细')
            this.formEdit = false
            this.formVisible = true
        },
        editFrequency(item,index){
            this.formTitle = this.$t('编辑频率明细')
            this.formEdit = true
            this.formEditData = item
            this.formEditIndex = index
            this.formVisible = true
            
        },
        delFrequency(index){
            this.frequencyList.splice(index,1)
        },
        formatFrequency(item){
            let res = `每${item.mounth}月的`
            switch (item.type) {
                case 'day':
                    res += '每天'
                    break;
                case 'week':
                    res += `每周${item.week}天`
                    break;
                case 'month':
                    res += `${item.day}号`
                    break;
            }
            res += `${item.hour}时${item.minute}分执行`

            return res
        },
        handleSave(){
            this.$refs.frequencyForm.validateForm(()=>{
                if(this.formEdit){
                    this.frequencyList[this.formEditIndex] = this.$refs.frequencyForm.getForm()
                }
                else{
                    this.frequencyList.push(this.$refs.frequencyForm.getForm())
                }
                
                this.formVisible = false
            })
        },
        handleCloseForm(){
            this.$refs.frequencyForm.resetForm()
        },
        handleOpenedForm(){
            if(this.formEdit){
                 this.$refs.frequencyForm.setForm(this.formEditData)
            }
           
        },

        // 添加表达式
        addExpress(){
            this.expressVisible = true
        },
        handleExpressClick(row){
            this.formData.cornValue = row.value
            this.expressVisible = false
        },


        resetForm(){
            this.frequencyList = []
            this.$refs.form && this.$refs.form.resetFields()
            this.$refs.form2 && this.$refs.form2.resetFields()
        },
        // 步骤验证
        validateStep(){
            if(this.formData.executeType == '3' && this.frequencyList.length == 0){
                this.$message({
                    type: 'error',
                    message: '请添加频率明细!'
                })
                return false
            }
            return this.$formValidateWraper(this.$refs.form)
        },
        // 校验表单
        validateForm(){
            return this.$formValidateWraper(this.$refs.form2)
        },

        setForm(data){
            this.formData.f_Name = data.f_Name
            const scheme = JSON.parse(data.f_Scheme)

            this.formData.startType = scheme.startType
            this.formData.startTime = scheme.startTime
            this.formData.endType = scheme.endType
            this.formData.endTime = scheme.endTime
            this.formData.executeType = scheme.executeType
            this.formData.isRestart = scheme.isRestart

            switch (this.formData.executeType) {
                case '1':// 只执行一次
                    break;
                case '2':// 简单重复执行
                    this.formData.simpleValue = scheme.simpleValue
                    this.formData.simpleType = scheme.simpleType
                    break;
                case '3':// 明细频率设置
                    this.frequencyList = scheme.frequencyList
                    break;
                case '4'://  表达式设置
                    this.formData.cornValue = scheme.cornValue
                    break;
            }

            if (this.formData.isRestart == '1') {
                this.formData.restartMinute = scheme.restartMinute
                this.formData.restartNum = scheme.restartNum
            }

            this.formData2.methodType = scheme.methodType

            switch (this.formData2.methodType) {
                case '1':// SQL语句
                    this.formData2.dbId = scheme.dbId
                    this.formData2.strSql = scheme.strSql
                    break;
                case '2':// 存储过程
                    this.formData2.dbId = scheme.dbId
                    this.formData2.procName = scheme.procName
                    break;
                case '3':// 接口
                    this.formData2.urlType = scheme.urlType
                    this.formData2.url = scheme.url
                    break;
                case '4':// Ioc依赖注入
                    this.formData2.iocName = scheme.iocName
                    break;
            }

        },
        getForm(){
            const postData = {
                f_Name:this.formData.f_Name,
            }

            const scheme = {
                startType: this.formData.startType,
                startTime: this.formData.startTime,
                endType: this.formData.endType,
                endTime: this.formData.endTime,
                executeType: this.formData.executeType,
                isRestart: this.formData.isRestart
            }


            switch (scheme.executeType) {
                case '1':// 只执行一次
                    break;
                case '2':// 简单重复执行
                    scheme.simpleValue = this.formData.simpleValue
                    scheme.simpleType = this.formData.simpleType
                    break;
                case '3':// 明细频率设置
                    scheme.frequencyList = this.frequencyList
                    break;
                case '4'://  表达式设置
                    scheme.cornValue = this.formData.cornValue
                    break;
            }

            if (scheme.isRestart == '1') {
                scheme.restartMinute = this.formData.restartMinute
                scheme.restartNum = this.formData.restartNum
            }

            scheme.methodType = this.formData2.methodType

            switch (this.formData2.methodType) {
                case '1':// SQL语句
                    scheme.dbId = this.formData2.dbId
                    scheme.strSql = this.formData2.strSql
                    break;
                case '2':// 存储过程
                    scheme.dbId = this.formData2.dbId
                    scheme.procName = this.formData2.procName
                    break;
                case '3':// 接口
                    scheme.urlType = this.formData2.urlType
                    scheme.url = this.formData2.url
                    break;
                case '4':// Ioc依赖注入
                    scheme.iocName = this.formData2.iocName
                    break;
            }
            postData.f_Scheme = JSON.stringify(scheme)
            return postData
        }
    }
}
</script>